<script setup>
import { fontSize } from "@/utils/globalMethod";
import { getMachineOEESubV2 } from "@/api/machine";
import moment from "moment";

const key = ref(1);
const month = ref([]);
const optionData = ref([]);
const option = computed(() => ({
  title: {
    text: "近七日设备工作时长",
    textStyle: {
      color: "#fff",
      fontSize: fontSize(0.16),
    },
    subtext: "单位：小时",
    subtextStyle: {
      color: "#fff",
      fontSize: fontSize(0.12),
    },
  },

  grid: {
    top: "30%",
    bottom: "10%",
    containLabel: true,
  },

  xAxis: {
    type: "category",
    data: month.value,
    axisLabel: {
      color: "#fff",
      fontSize: fontSize(0.12),
    },
  },
  yAxis: {
    type: "value",
    axisLabel: {
      color: "#fff",
      fontSize: fontSize(0.12),
    },
    splitLine: {
      lineStyle: {
        type: "dashed",
        color: ["#b9a7a7"],
      },
    },
  },
  series: [
    {
      data: optionData.value,
      name: "工作时长",
      color: "#409eff",
      type: "bar",
      stack: "Total",
      label: {
        show: true,
        position: "top",
        color: "#fff",
        fontSize: fontSize(0.12),
      },
    },
  ],
}));

const loadData = async () => {
  const { data } = await getMachineOEESubV2({
    date: [
      moment().add(-7, "d").format("YYYYMMDD"),
      moment().format("YYYYMMDD"),
    ],
  });
  data.map((item) => {
    month.value.push(moment(item.kgrq).format(`M月D日`));
    optionData.value.push(Number(item.gzsc).toFixed(2));
  });
};

const keyResize = () => {
  nextTick(() => {
    setTimeout(() => {
      key.value++;
    }, 100);
  });
};

onMounted(loadData);
onMounted(() => {
  window.addEventListener("resize", keyResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", keyResize);
});
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box13 class="ps_pd10" :key="key">
      <ps-chart2 :option="option"></ps-chart2>
    </dv-border-box13>
  </div>
</template>

<style scoped lang="scss"></style>
